<template>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/css/jpetstore.css" type="text/css">
</head>
<body>
    <header th:fragment="header">
        <div id="Logo">
            <div id="LogoContent">
                <a href="/catalog/main">
                    <img src="../assets/catalog/images/logo-topbar.gif" />
                </a>
            </div>
        </div>

        <div id="Menu">
            <div id="MenuContent">
<!--                关于购物车跳转，判断session中的account是否为空,不为空访问cart，为空去登陆-->
                <a  href="/cart/viewCart" v-if="flag"> 
                    <img align="middle" name="img_cart" src="../assets/catalog/images/cart.gif" />
                </a>
                <img align="middle" src="../assets/catalog/images/separator.gif" />
                <a href="/account/login" v-if="!flag">
                    Sign In
                </a>
                <a href="/catalog/main" v-if="flag" v-on:click="signout">
                    Sign Out
                </a> 
                <a :href="'/account/view_info/'+username" v-if="flag">
                    <img align="middle" src="../assets/catalog/images/separator.gif" />
                    My Account 
                </a>
                <img align="middle" src="../assets/catalog/images/separator.gif" />
                <a href="/help.html">
                    ?
                </a>
            </div>
        </div>

        <div id="Search">
            <div id="SearchContent">
                <form action="/catalog/searchProducts" method="post">
                    <input type="text" name="keyword" size="14" />
                    <input type="submit" name="searchProducts" value="Search"/>
                </form>
            </div>
        </div>

        <div id="QuickLinks">
            <a href="/catalog/viewCategory?categoryId=FISH">
                <img src="../assets/catalog/images/sm_fish.gif" />
            </a>
            <img src="../assets/catalog/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=DOGS">
                <img src="../assets/catalog/images/sm_dogs.gif" />
            </a>
            <img src="../assets/catalog/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=REPTILES">
                <img src="../assets/catalog/images/sm_reptiles.gif" />
            </a>
            <img src="../assets/catalog/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=CATS">
                <img src="../assets/catalog/images/sm_cats.gif" />
            </a>
            <img src="../assets/catalog/images/separator.gif" />
            <a href="/catalog/viewCategory?categoryId=BIRDS">
                <img src="../assets/catalog/images/sm_birds.gif" />
            </a>
        </div>
    </header>

</body>
</html>
</template>
<script>


export default {
    data(){
        return{
            username : localStorage.getItem("token"),
            flag : localStorage.getItem("token").length > 0,
            user : [{
                username1 : this.username
            }]
            
        }
    },
    methods: {
        signout: function(){
            localStorage.clear();
            console.log(localStorage.getItem("token"))
            console.log("aaaaaaa")
        },
        
        
    },
    
    
    
}
console.log(localStorage.getItem("token"))

</script>
<style>

</style>